<template>
  <div class="serch">
    <el-input v-model="state" :placeholder="$t('SerchInput_Pleaseinputthecontent')" @input="filterdata"></el-input>
  </div>
</template>

<script>
export default {
  data () {
    return {
      state: null, // 输入框内容
      newdata: null // 筛选后的数据
    }
  },
  props: ['serchdata'],
  methods: {
    // 筛选数组，以及input事件
    filterdata () {
      this.newdata = this.state ? this.serchdata.filter((item) => {
        // return item.RepoTags[0].toLowerCase().indexOf(this.state.toLowerCase()) !== -1
        if (item.RepoTags === null) {
          return item.RepoDigests[0].toLowerCase().indexOf(this.state.toLowerCase()) !== -1
        } else {
          return item.RepoTags[0].toLowerCase().indexOf(this.state.toLowerCase()) !== -1
        }
      }) : this.serchdata
      this.$emit('serchActive', this.newdata)
    },
    // 鼠标按下选择
    itemclick (item) {
      this.state = item.RepoTags[0]
      this.filterdata()
    }
  }
}
</script>

<style lang="scss" scoped>
.serch{
  position: relative;
}
.list{
  position: absolute;
  z-index: 10;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  padding: 10px;
  li{
    height: 30px;
    min-width: 300px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
